<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>sticky</title>
  </head>
  <style>
    div.sticky{
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        padding: 5px;
        background-color: aquamarine;
        border: 2px solid rebeccapurple;
    }
  </style>
  <body>
    <p>粘性布局</p>
    <div class="sticky">我是可以挂在上面</div>
    <div  style="padding-bottom:2000px">
      <p>
        在此例中，当您到达元素的滚动位置时，粘性元素将停留在页面顶部（top: 0）。
      </p>
      <p>向上滚动以消除粘性。</p>
      <p>
        一些启用滚动的文本.. Lorem ipsum dolor sit amet, illum definitiones no
        quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui
        causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus
        repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae
        voluptatibus.
      </p>
      <p>
        一些启用滚动的文本.. Lorem ipsum dolor sit amet, illum definitiones no
        quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui
        causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus
        repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae
        voluptatibus.
      </p>
    </div>
  </body>
</html>
